<template>
	<!-- 物联网 -->
	<view class="things-web-page">
		<view class="map-content">
			<map class="map" id="map" ref="map"  :show-location="true" :latitude="latitude" :longitude="longitude"
				:markers="markersList" @markertap="handleClickMarker" :polyline="polyline"
				@regionchange="handleRegionChange">
			</map>
			<view class="search-input-area">
				<uni-search-bar class="search-input" bgColor="#fff" radius="18" placeholder="按名称搜索" clearButton="auto"
					cancelButton="none" @confirm="handleSearch" />
				<view class="my-favorites" @click="goToPage('/myPages/favorites/index')">
					<text class="f-img"></text>
					<text>我的收藏</text>
				</view>
			</view>
		</view>

		<!-- 标记点信息 -->
		<uni-popup class="details-popup-box" ref="detailsPpopup" type="bottom" borderRadius="16px 16px 0 0"
			backgroundColor="#F7F7F7" @maskClick="close('detailsPpopup')">
			<view class="details-popup">
				<view class="details-popup-h">
					<view class="tit">
						<view class="tit-text">
							{{activeObj.destination}}
							<icon class="icon icon-collect"></icon>
						</view>
						<view class="p">{{nowDateStr}}</view>
					</view>
					<view>
						<view class="distance">
							<uni-icons color="#22A366" type="paperplane-filled" size="12" />
							距离你{{distanceStr}}km
						</view>
						<view class="close" @click="close('detailsPpopup')">
							<uni-icons type="closeempty" class="16"></uni-icons>
						</view>
					</view>
				</view>
				<view class="details-popup-b table">
					<view v-for="(v, i) in activeObj.data" :key="'row-'+i">
						<label>{{v.title}}</label>
						<text>{{ v.val }}</text>
					</view>
					<view>
						<label>更多详情</label>
						<text @click="handleDevicePopupOpen" class="link-style">设备运行详情</text>
					</view>
					<view>
						<label>视频摄像头</label>
						<text @click="handleMonitorPopupOpen" class="link-style">视频监控</text>
					</view>
				</view>

				<view class="details-popup-b">
					<view class="task">
						<view class="tit">
							任务
						</view>
						<view class="foo">
							<text class="foo-text">创建任务</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</view>
				</view>

				<view class="details-popup-b record">
					<view class="title">
						记录1
					</view>
					<view class="content" :border="false">
						<view class="content-item" v-if="marksList.length" v-for="(v,i) in marksList" :key="i">
							<view class="overflow">
								<view class="img lt">
									<image :src="v.avatar" />
								</view>
								<view class="con rt">
									<view class="tit">
										<text class="tit-text">{{v.name}}</text>
										<text class="time"> {{ handleTimeStrToTimeStamp(v.ts) }}</text>
									</view>
									<view class="bo" v-if="!v.content">
										<text class="imp">【巡检打卡位置】</text>{{ v.address }}
									</view>
									<view class="bo" v-else @click="handleCheckRecord(v)">
										<text class="imp">【添加记录】</text>{{handleGetRichHtmlString(v.content)}}
										<image class="img" :src="vv" v-for="(vv,index) in v.imgs" :key="index"
											@click="handlePreviewImage(vv)"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="null" v-else>暂无数据</view>
					</view>

					<view class="handle-btn">
						<view class="handle-btn-l">
							<button class="btn" v-for="(v,i) in handleBtnList" :key="'btn-' + i"
								:open-type=" v.iconClass === 'fx' ? 'share' : '' "
								@click="()=>{ this[v.eventFnName]() }">
								<text :class="'icon icon-' + v.iconClass"></text>
								<view>{{v.label}}</view>
							</button>
						</view>
						<view class="handle-btn-b">
							<button class="mini-btn" plain type="primary" @click="handleLine">导航</button>
							<button class="mini-btn line" plain type="default" @click="handleLine">路线</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>


		<!-- 打卡 -->
		<uni-popup class="clockIn-popup-box" ref="clockInPpopup" type="bottom" borderRadius="16px 16px 0 0"
			backgroundColor="#F7F7F7" @maskClick="close('clockInPpopup')">
			<view class="clockIn-popup">
				<view class="clockIn-popup-h">
					<view class="tit">
						<view class="tit-text">
							打卡
						</view>
					</view>
					<view>
						<view class="close" @click="close('clockInPpopup')">
							<uni-icons type="closeempty"></uni-icons>
						</view>
					</view>
				</view>

				<view class="clockIn-popup-b">
					<view class="user-group">
						<view class="user">
							<image :src="userInfo.avatar">
							</image>
							<view class="nick-text">{{userInfo.nick}}</view>
						</view>
						<text>未设置考勤规则</text>
					</view>
				</view>

				<view class="clockIn-popup-b">
					<view class="watermark-photo">
						<view class="tit">
							水印照片
						</view>
						<view class="notes">添加备注信息…</view>
					</view>
				</view>

				<view class="clockIn-popup-b">
					<view class="clock-in">
						<view class="tit">
							<text class="tit-b">同步打卡信息到标记</text>
							<text class="tit-area">
								{{ regeocode.address_reference.town.title }}
								{{ regeocode.address_reference.landmark_l2.title }}
							</text>
						</view>
						<view class="content">
							<button class="clock-in-btn" @click="handleMarkit">
								<text class="b">
									打卡
								</text>
								<view class="time">
									{{handleGetNow()}}
								</view>
							</button>
							<view class="area">
								{{ regeocode.address_reference.town.title }}
								{{ regeocode.address_reference.landmark_l2.title }}
								<view class="district">
									{{ regeocode.address }}
									<button type="default" class="change-area" @click="handleAdjustPosition"> 调整位置
									</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 设备日志 -->
		<uni-popup class="device-popup-box" ref="devicePopup" type="bottom" borderRadius="16px 16px 0 0"
			backgroundColor="#F7F7F7" @maskClick="close('devicePopup')">
			<view class="device-popup">
				<view class="device-popup-h">
					<view class="tit">
						<view class="tit-text">
							{{activeObj.destination}}
						</view>
					</view>
					<view class="close" @click="close('devicePopup')">
						<uni-icons type="closeempty" size="13"></uni-icons>
					</view>
				</view>

				<view class="device-popup-b">
					<view class="group contacts-group">
						<view class="contacts">
							<img class="img"
								src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/75cd094d-96e2-4759-9a75-c0b61d7d1375.png"
								alt="" srcset="" />
							<text class="name">王超</text>
						</view>
						<view class="phone">
							<text class="phone-number">13678028945</text>
							<view class="phone-icon-filled">
								<uni-icons @click="handlePhoneCall('13678028945')" type="phone-filled" size="20"
									color="#fff"></uni-icons>
							</view>
						</view>
					</view>

					<view class="group table">
						<view v-for="(v, i) in activeObj.data" :key="'row-'+i">
							<label>{{v.title}}</label>
							<text>{{ v.val }}</text>
						</view>
					</view>
					<view class="group">
						<view class="tit">
							<text class="tit-text">设备运行数据曲线</text>
							<!-- <uni-data-select class="tit-select" v-model="selectValue" :localdata="selectRange"
								placeholder="请选择"></uni-data-select> -->
						</view>
						<view class="charts-box">
							<l-echart ref="chartRef" @finished="init"></l-echart>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 设备监控 -->
		<uni-popup class="monitor-popup-box" ref="monitorPopup" type="bottom" borderRadius="16px 16px 0 0"
			backgroundColor="#F7F7F7" @maskClick="close('monitorPopup')">
			<view class="monitor-popup">
				<view class="monitor-popup-h">
					<view class="tit">
						<view class="tit-text">
							{{activeObj.destination}}
						</view>
					</view>
					<view class="close" @click="close('monitorPopup')">
						<uni-icons type="closeempty" size="13"></uni-icons>
					</view>
				</view>

				<view class="monitor-popup-b">
					<video class="video"
						src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/22516a07-ff8a-414e-97f8-1338a6e0433c.mp4"
						controls></video>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		publics
	} from '@/mixins/publics.js';

	import {
		getDeviceLogsJson,
		getDevicesMarkersList,
		postInspectionMarkit,
		getInspectionMarkList,
		getGeocodeQQ
	} from '@/utils/api.js';

	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min');

	export default {
		mixins: [publics],
		props: {
			userInfo: {
				type: Object
			}
		},
		data() {
			return {
				selectValue: undefined,
				selectRange: [],
				option: {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							textShadowColor: 'transparent',
							textShadowBlur: 10
						},
						valueFormatter: (value) => value.toFixed(2),
					},
					legend: {
						show: true,
						type: 'scroll'
					},
					dataZoom: [{
							show: true,
							realtime: true,
							start: 0,
							end: 5
						},
						{
							type: 'inside',
							realtime: true,
							start: 0,
							end: 5
						}
					],
					grid: {
						top: '14%',
						left: '3%',
						right: '4%',
						bottom: '8%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: []
					},
					yAxis: {
						type: 'value'
					},
					series: []
				},
				rangeNum: 100, // 打卡范围为 100米
				regeocode: {
					address: '',
					address_reference:{
						town:{},
						landmark_l2:{}
					}
				}, // 打卡时查询的位置信息
				// timestamp: new Date(),
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				distanceStr: '', // 距离
				markersList: [],
				activeObj: {
					data: []
				}, // 点击标记点获取的数据
				showClearIcon: false,
				inputClearValue: '',
				nowDateStr: '',
				handleBtnList: [{
						label: '打卡',
						iconClass: 'dk',
						eventFnName: 'handleClockIn'
					}, {
						label: '分享',
						iconClass: 'fx'
					}, {
						label: '记录',
						iconClass: 'jl',
						eventFnName: 'handleRecord'
					},
					// {
					// 	label: '编辑',
					// 	iconClass: 'bj'
					// }
				],
				localLatitude: '',
				localLongitude: '',
				polyline: [],
				marksList: [], // 记录列表
				intervalFn: undefined
			}
		},
		created() {
			this.getDevicesMarkersListApi()
		},
		mounted() {
			this.handleGetCurrentLocation(); // 获取当前位置

			this.handleEchartFn();
		},
		methods: {
			// 提取富文本字段的文字内容
			handleGetRichHtmlString(htmlString) {
				// 正则表达式提取第一个 <p> 标签中的文本内容
				const regex = /<p>(.*?)<\/p>/;
				const match = htmlString.match(regex);
				let result = match ? match[1].replace(/<[^>]+>/g, '').trim() : '';
				return result;
			},
			// 标记点 记录列表查询
			async getInspectionMarkListApi() {
				if (this.activeObj.uniq_id) {
					await getInspectionMarkList({
						id: this.activeObj.uniq_id
					}).then(res => {
						if (res.code === 200) {
							this.marksList = res.data.marks;
						}
					})
				}
			},
			// 打卡
			handleMarkit() {
				const {
					address,
					latitude,
					longitude
				} = this.regeocode;
				
				let gapNum = this.calculateDistance(latitude, longitude,
					this.activeObj.latitude, this.activeObj.longitude);
				gapNum = gapNum * 1000;
				
				if (this.rangeNum < gapNum) {
					uni.showToast({
						icon: 'error',
						title: '不在范围内!'
					});
					return false
				} else {
					let postData = {
						id: this.activeObj.id,
						address,
						gis: `${latitude},${longitude}`
					};
					postInspectionMarkit(postData).then(res => {
						console.log("res ------->>>", res)
						if (res.code === 200) {
							uni.showModal({
								title: '提示',
								content: '打卡成功！',
								showCancel: false
							});
						}
					});
				}
			},

			// 获取当前时分
			handleGetNow() {
				// 获取当前时间
				const now = new Date();

				// 获取当前小时和分钟
				const hours = now.getHours();
				const minutes = now.getMinutes();

				return `${hours}:${(minutes < 10 ? "0" + minutes : minutes)}`
			},

			// 查询设备监控视频
			handleMonitorPopupOpen() {
				this.close('clockInPpopup');
				this.$refs.monitorPopup.open('bottom');
				uni.hideTabBar();
			},

			// 查询设备运行详情
			handleDevicePopupOpen() {
				this.close('clockInPpopup');
				this.$refs.devicePopup.open('bottom');
				uni.hideTabBar();

				const id = this.activeObj.uniq_id;
				this.selectRange = [];
				let xAxisData = [],
					seriesData = [];
				getDeviceLogsJson(id).then(res => {
					let keysArr = Object.keys(res);
					keysArr.map((item, index) => {
						// 设置图例下拉框的数据
						this.selectRange.push({
							value: index,
							text: item
						});

						(res[keysArr[0]][0]['values']).map(v => {
							xAxisData.push(v[0]);
						});

						seriesData.push({
							type: 'line',
							smooth: true,
							name: item,
							data: this.handleEchartsSeriesData(res, index)
						})
					});


					this.option.xAxis.data = xAxisData.map(function(str) {
						return str.replace(' ', '\n');
					});
					this.option.series = seriesData;

					this.handleEchartFn();
				})
			},

			// echarts series data 的数据处理
			handleEchartsSeriesData(res, index) {
				let arr = [];
				let keysArr = Object.keys(res);
				(res[keysArr[index]][0]['values']).map(v => {
					arr.push(v[1])
				});
				return arr;
			},

			// 数据更新时重绘echarts
			async handleEchartFn() {
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.option);
			},

			// 视野发生变化时触发
			handleRegionChange(e) {
				if (e.type === 'begin') {
					this.getDevicesMarkersListApi()
				}
			},
			// 获取地图标记点列表
			getDevicesMarkersListApi(data) {
				getDevicesMarkersList(data).then(res => {
					this.markersList = res;
				})
			},
			// 搜索
			handleSearch(v) {
				console.log('v -->>', v)
			},
			// 打卡
			handleClockIn() {
				const _this = this;
				const {
					_id: id,
					latitude,
					longitude
				} = this.activeObj;
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						console.log('授权成功');
						uni.getLocation({
							type: 'gcj02',
							isHighAccuracy: true,
							highAccuracyExpireTime: 5000,
							success: (res) => {
								console.log('获取位置成功1', res, res.latitude, res.longitude, latitude,
									longitude);

								_this.getLocationByCoordinates(res.latitude, res.longitude).then(
										result => {
											_this.regeocode = result; // 保存打卡时查询的位置信息	
										})
									.catch(req => {
										uni.showToast({
											title: JSON.stringify(req),
											icon: 'none'
										})
									});
							},
							fail: (err) => {
								console.error('获取位置失败', err);
								uni.showModal({
									title: '提示',
									content: '获取位置失败，请开启设备定位服务！',
									showCancel: false
								})
							}
						});
					},
					fail: (err) => {
						console.error('获取位置失败', err);
						uni.showModal({
							title: '提示',
							content: '获取位置失败，请授权定位服务！',
							showCancel: false
						})
					}
				});
				this.$refs.clockInPpopup.open('bottom');
				uni.hideTabBar();
			},
			// 记录
			handleRecord() {
				let {
					longitude,
					latitude,
					uniq_id
				} = this.activeObj;

				const gis = `${latitude},${longitude}`;
				this.goToPage(`/workbenchesPages/record/index?id=${uniq_id}&gis=${gis}`)
			},

			// 查看记录
			handleCheckRecord(item) {
				const content = (item.content);
				console.log("content ---->>>", content)
				uni.setStorageSync('recordContent', content);
				this.goToPage(`/workbenchesPages/record/index`)
			},

			// 路线
			handleLine() {
				let {
					longitude,
					latitude,
					destination
				} = this.activeObj;

				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					address: destination,
					success: function() {
						console.log('success');
					}
				});
			},

			// 导航
			handleNavigation() {
				let {
					longitude,
					latitude,
					destination
				} = this.activeObj;
				console.log('dao hang', longitude, latitude, destination)

				const _this = this;
				wx.request({
					url: 'https://apis.map.qq.com/ws/direction/v1/driving/', // 腾讯地图驾车路线规划API
					data: {
						from: `${_this.localLatitude},${_this.localLongitude}`,
						to: `${latitude},${longitude}`,
						key: 'EGIBZ-M523X-YYD4E-7HLQU-KAP3J-CYF4Q'
					},
					success: function(res) {
						console.log('路线规划结果：', res.data);
						// 在地图上绘制路线
						_this.polyline = [{
							points: res.data.result.routes[0].polyline,
							color: '#FF0000',
							width: 6
						}]
					}
				});
			},

			// Haversine公式计算两点之间的距离
			calculateDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;

				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137; // 地球半径
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));

				return distance / 1000;
			},

			// 实时显示当前时间
			handleUpNowDate() {
				const now = new Date();
				this.nowDateStr = this.formatTime(now);
			},

			// 位置调整
			handleAdjustPosition() {
				const _this = this;
				wx.choosePoi({
					success(res) {
						console.log(res, '成功回调')
						getGeocodeQQ({
							address: res.address + res.name
						}).then(res => {
							console.log("res --->>>", res)
							if(res.status === 0 ){
								let result = res.result;
								
								const {
									province,
									city,
									district,
									street,
									street_number
								} = result.address_components;
								
								_this.regeocode = {
									address: province + city + district,
									address_reference: {
										town:{
											title: result.title
										},
										landmark_l2:{}
									},
									latitude: result.location['lat'],
									longitude: result.location['lng']
								}
							}
							
							
						})
					},
					fail(res) {
						console.log(res, '失败回调')
					}
				});
			},

			// 获取当前位置
			handleGetCurrentLocation() {
				const _this = this;

				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						console.log('授权成功');
						uni.getLocation({
							type: 'gcj02',
							isHighAccuracy: true,
							highAccuracyExpireTime: 5000,
							success: (res) => {
								console.log('获取位置成功1', res);
								// 设置地图中心点
								_this.latitude = res.latitude;
								_this.longitude = res.longitude;

								_this.localLatitude = res.latitude;
								_this.localLongitude = res.longitude;

							},
							fail: (err) => {
								console.error('获取位置失败', err);
								uni.showModal({
									title: '提示',
									content: '获取位置失败，请开启设备定位服务！',
									showCancel: false
								})
							}
						});
					}
				});
			},

			// 点击标记点
			handleClickMarker(e) {
				this.handleUpNowDate(); // 页面加载时立刻显示一次时间

				const markerId = e.markerId; // 获取被点击的标记ID
				this.markersList.filter(v => {
					if (e.markerId === v.id) {
						this.activeObj = v;
					}
				})

				let str = this.calculateDistance(this.localLatitude, this.localLongitude, this.activeObj.latitude, this
					.activeObj
					.longitude);

				str = str.toFixed(2);
				this.distanceStr = str;

				// 查询记录列表
				this.getInspectionMarkListApi().finally(res => {
					this.$refs.detailsPpopup.open('bottom');
					uni.hideTabBar();
				});
			},

			close(refName) {
				if (refName === 'detailsPpopup') {
					uni.showTabBar();
					this.activeObj = {};
				} else {
					this.getInspectionMarkListApi();
				}
				this.$refs[refName].close();
			}
		}
	}
</script>


<style lang="scss">
	.things-web-page {
		height: 100%;

		.map-content {
			height: 100%;
			position: relative;

			.map {
				width: 100%;
				height: 100%;

				.amap-copyright,
				.amap-logo {
					z-index: 9;
				}
			}

			.search-input-area {
				position: absolute;
				top: 6px;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.search-input {
					width: 272px;
					height: 36px;
					background: #FFFFFF;
					box-sizing: border-box;
					border-radius: 18px;
					padding: 0;
				}

				.my-favorites {
					width: 77px;
					height: 36px;
					background: #FFFFFF;
					box-shadow: 0 2px 4px 0 #0000001a;
					border-radius: 18px;
					margin-left: 4px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 10px;
					color: #1E1F23;
					display: flex;
					justify-content: center;
					align-items: center;

					.f-img {
						width: 14px;
						height: 14px;
						background: url("/static/images/icon/3.png") no-repeat 0 0;
						background-size: 100% 100%;
						margin-right: 4px;
					}
				}

				.uni-searchbar {
					padding: 0;
				}
			}
		}

		.clockIn-popup-box {
			.clockIn-popup {
				background-color: #F6F7F9;

				&-h {
					font-weight: 600;
					font-size: 14px;
					color: #2C2C2C;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 13px 15px 10px;
					margin-bottom: 30rpx;
					padding: 38rpx 50rpx 0 46rpx;

					.tit {
						.tit-text {
							width: 88rpx;
							height: 60rpx;
							font-family: PingFangSC-Semibold;
							font-weight: 600;
							font-size: 44rpx;
							color: #000000;
							text-align: justify;
						}
					}

					.distance,
					.close {
						display: inline-block;
					}

					.close {
						width: 16px;
						height: 16px;
						line-height: 16px;
						border-radius: 100%;
						color: #9A9FB3;
						margin: initial;
						padding: 0;
						text-align: center;
						vertical-align: text-top;
					}
				}

				&-b {
					margin: 0 30rpx 16rpx;
					border-radius: 16rpx;

					.user-group {
						background-color: #fff;
						padding: 24rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #FFFFFF;

						.user {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.nick-text {
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
								margin-left: 12rpx;
							}

							image {
								width: 56rpx;
								height: 56rpx;
								border-radius: 56rpx;
							}
						}



						text {
							opacity: 0.4;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}


					}

					.watermark-photo {
						background-color: #fff;
						padding: 24rpx 20rpx;

						.tit {
							height: 44rpx;
							font-family: PingFangSC-Semibold;
							font-weight: 600;
							font-size: 32rpx;
							color: #000000;
							margin-bottom: 24rpx;
						}

						.notes {
							opacity: 0.6;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.clock-in {
						.tit {
							background-color: #fff;
							padding: 24rpx 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							&-b {
								font-family: PingFangSC-Semibold;
								font-weight: 600;
								font-size: 32rpx;
								color: #000000;
							}

							&-area {
								opacity: 0.4;
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
							}
						}

						.content {
							background-color: #F6F7F9;
							margin: 8rpx auto 0;
							text-align: center;

							.clock-in-btn {
								margin: 8rpx auto 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								width: 244rpx;
								height: 244rpx;
								border-radius: 244rpx;
								text-align: center;
								background-image: linear-gradient(-39deg, #47D09F 0%, #22A366 100%);

								.b {
									font-family: PingFangSC-Semibold;
									font-weight: 600;
									font-size: 52rpx;
									color: #FFFFFF;
								}

								.time {
									opacity: 0.4;
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 40rpx;
									color: #FFFFFF;
								}
							}

							.area {
								font-family: PingFangSC-Semibold;
								font-weight: 600;
								font-size: 36rpx;
								color: #000000;

								.district {
									margin-top: 4rpx;
									height: 34rpx;
									opacity: 0.4;
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 24rpx;
									color: #000000;
									display: flex;
									justify-content: center;
									align-items: center;

									.change-area {
										width: fit-content;
										height: 36rpx;
										line-height: 36rpx;
										border-radius: 36rpx;
										font-family: PingFangSC-Regular;
										font-weight: 400;
										font-size: 24rpx;
										color: #22A366;
										text-align: center;
										background: #FFFFFF;
										border: 2rpx solid #CBCBCB;
										margin: 0;
										margin-left: 4rpx;
									}
								}
							}
						}
					}
				}
			}
		}

		.details-popup-box {
			.details-popup {
				&-h {
					font-weight: 600;
					font-size: 14px;
					color: #2C2C2C;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					padding: 13px 15px 10px;
					border-bottom: 1px solid #F1F1F1;

					.tit {
						.tit-text {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-family: PingFangSC-Semibold;
							font-weight: 600;
							font-size: 15px;
							color: #2C2C2C;

							.icon-collect {
								width: 14px;
								height: 14px;
								background: url("/static/images/icon/3.png") no-repeat 0 0;
								background-size: 100% 100%;
								vertical-align: middle;
								margin-left: 3px;
							}

							&+.p {
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 12px;
								color: #9B9B9B;
							}
						}
					}

					.distance,
					.close {
						display: inline-block;
					}

					.close {
						width: 16px;
						height: 16px;
						line-height: 16px;
						border-radius: 100%;
						color: #9A9FB3;
						margin: initial;
						padding: 0;
						text-align: center;
						vertical-align: text-top;
						margin-left: 17rpx;
					}
				}

				&-b {
					background-color: #fff;
					padding: 0px 15px;
					margin-bottom: 10px;

					&:last-child {
						margin-bottom: 0px;
					}

					&.table {
						padding-bottom: 8px;

						.link-style {
							color: #4375EE;
							font-size: 14px;
						}

						label {
							color: #2C2C2C;
							opacity: 0.6;
							font-weight: 400;
							font-size: 12px;
							color: #2C2C2C;
							margin-right: 8px;
							width: 22%;
							display: inline-block;
						}

						text {
							color: #2c2c2c;
							font-size: 12px;
							font-face: PingFangSC;
							font-weight: 400;

							&.uni-link {
								color: #4375ee;
							}
						}
					}

					.task {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 11px 0px;

						.tit {
							font-family: PingFangSC-Semibold;
							font-weight: bold;
							font-size: 14px;
							color: #2C2C2C;
						}

						.foo {
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 12px;
							color: #2C2C2C;
							display: flex;
							justify-content: space-between;
							align-items: center;

							&-text {
								margin-right: 8px;
							}
						}
					}

					&.record {
						padding: 10px 16px;

						&>.title {
							font-family: PingFangSC-Semibold;
							font-weight: 600;
							font-size: 14px;
							color: #2C2C2C;
						}

						&>.content {
							padding: 11px 0;
							max-height: 22vh;
							overflow: auto;

							.null {
								width: 100%;
								margin-bottom: 40rpx;
								text-align: center;
								opacity: 0.6;
							}

							.content-item {
								.overflow {
									.img {
										margin-right: 6px;

										&>image {
											width: 28px;
											height: 28px;
											border-radius: 28px;
										}
									}

									.con {
										width: calc(100% - 34px);

										.tit {
											margin-bottom: 11px;

											&-text {
												height: 20px;
												font-family: PingFangSC-Semibold;
												font-weight: 600;
												font-size: 14px;
												color: #2C2C2C;
												letter-spacing: 0;
												margin-right: 4px;
											}

											.time {
												height: 17px;
												opacity: 0.6;
												font-family: PingFangSC-Regular;
												font-weight: 400;
												font-size: 12px;
												color: #2C2C2C;
												letter-spacing: 0;
												margin-left: 8rpx;
											}
										}

										.bo {
											color: #2c2c2c;
											font-size: 12px;
											font-face: PingFangSC;
											font-weight: 400;
											min-height: 50px;
											display: flex;

											.imp {
												color: #196cff;
											}

											.img {
												width: 40rpx;
												height: 40rpx;
											}
										}
									}
								}
							}
						}


						.handle-btn {
							display: flex;
							justify-content: space-between;
							align-items: center;

							&-l {
								width: calc(100% - 150px - 24px - 4px);
								display: flex;
								justify-content: space-between;
								text-align: center;
								align-items: baseline;
								margin-left: 4px;

								.btn {
									line-height: initial;
									border-color: transparent;
									background: none;

									&::after {
										border: none;
									}
								}

								.icon {
									display: inline-block;

									&+view {
										height: inherit;
										font-family: PingFangSC-Regular;
										font-weight: 400;
										font-size: 10px;
										color: #2C2C2C;
										margin-top: -2px;
									}
								}

								.icon-dk {
									width: 19px;
									height: 19px;
									background: url("https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/4fcabb02-3134-4bba-b348-0c24bae08c2b.png") no-repeat 0 0;
									background-size: 100% 100%;
								}

								.icon-fx {
									width: 19px;
									height: 19px;
									background: #1E1F23;
									background: url("/static/images/icon/fx.png") no-repeat 0 0;
									background-size: 100% 100%;
								}

								.icon-jl {
									width: 19px;
									height: 19px;
									background: url("/static/images/icon/mess-1.png") no-repeat 0 0;
									background-size: 100% 100%;
								}

								.icon-bj {
									width: 19px;
									height: 19px;
									background: url("/static/images/icon/edit.png") no-repeat 0 0;
									background-size: 100% 100%;
								}

							}

							&-b {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.mini-btn {
									width: 70px;
									height: 40px;
									line-height: 40px;
									background: #FFFFFF;
									border: 1px solid #B2B2B2;
									border-radius: 20px;
									margin-right: 10px;
									font-family: PingFangSC-Regular;
									font-weight: 400;
									font-size: 15px;
									color: #2C2C2C;

									&:last-child {
										margin-right: 0;
									}

									&.line {
										background: #22A366;
										color: #fff;
										border: none;
									}
								}
							}
						}
					}

					.user-group {
						display: flex;
						width: 100%;
						justify-content: space-between;
						align-items: center;
						height: 104rpx;
						background: #FFFFFF;
						border-radius: 16rpx;

						.user {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.nick-text {
								font-family: PingFangSC-Regular;
								font-weight: 400;
								font-size: 28rpx;
								color: #000000;
							}

							image {
								width: 56rpx;
								height: 56rpx;
								border-radius: 56rpx;
							}
						}



						text {
							opacity: 0.4;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}


					}
				}
			}
		}

		.device-popup-box,
		.monitor-popup-box {
			background-color: #F7F7F7;

			.device-popup,
			.monitor-popup {
				background-color: #F7F7F7;

				&-h {
					font-weight: 600;
					font-size: 14px;
					color: #2C2C2C;
					text-align: center;
					// background-color: #fff;
					padding: 13px 15px 10px;
					background: #F7F7F7;
					border-radius: 16rpx 16rpx 0 0;
					// border-bottom: 1px solid #F1F1F1;
					position: relative;

					.tit {
						.tit-text {
							font-family: PingFangSC-Semibold;
							font-weight: 600;
							font-size: 15px;
							color: #2C2C2C;
							text-align: center;
						}
					}

					.distance,
					.close {
						display: inline-block;
					}

					.close {
						width: 26rpx;
						height: 26rpx;
						line-height: 26rpx;
						border-radius: 100%;
						color: #828282;
						padding: 0;
						text-align: center;
						vertical-align: text-top;
						position: absolute;
						right: 40.68rpx;
						bottom: 0;
						top: 0;
						margin: auto;
					}
				}

				&-b {
					margin-bottom: 10px;
					max-height: 82vh;
					overflow: auto;

					.video {
						width: 100%;
						height: 437.18rpx;
						margin-bottom: 20vh;
					}

					.group {
						background-color: #fff;
						box-sizing: border-box;
						padding: 24rpx 20px;
						margin: 0 18rpx 24rpx;

						&.contacts-group {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 140rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							box-sizing: border-box;
							padding: 0 32rpx;

							.contacts {
								display: flex;
								align-items: center;

								.img {
									width: 76rpx;
									height: 76rpx;
									border-radius: 16rpx;
								}

								.name {
									font-family: PingFangSC-Semibold;
									font-weight: 600;
									font-size: 34rpx;
									color: #000000;
									margin-left: 24rpx;
								}
							}

							.phone {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.phone-number {
									font-size: 48rpx;
									color: #22A366;
									margin-right: 14px;
									font-weight: bold;
								}

								.phone-icon-filled {
									width: 78rpx;
									height: 78rpx;
									line-height: 78rpx;
									text-align: center;
									border-radius: 78rpx;
									background: #22A366;
								}
							}
						}

						&.table {
							padding-bottom: 8px;

							.link-style {
								color: #4375EE;
								font-size: 14px;
							}

							label {
								color: #2C2C2C;
								opacity: 0.6;
								font-weight: 400;
								font-size: 12px;
								color: #2C2C2C;
								margin-right: 8px;
								width: 22%;
								display: inline-block;
							}

							text {
								color: #2c2c2c;
								font-size: 12px;
								font-face: PingFangSC;
								font-weight: 400;

								&.uni-link {
									color: #4375ee;
								}
							}
						}

						.tit {
							width: 100%;
							height: 60rpx;
							line-height: 60rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							&-text {
								font-family: PingFangSC-Semibold;
								font-weight: 600;
								font-size: 28rpx;
								color: #000000;
							}

							&-select {
								width: 30%;
								height: 60rpx;
							}
						}

						.charts-box {
							width: 100%;
							height: 550rpx;
							padding-top: 16rpx;
						}
					}
				}
			}
		}
	}
</style>